﻿var ui={};

/////////////////////////////////////////////////////////////////////////////////////////////
//                                                                                         //
//                                         IMG                                             //
//                                                                                         //
///////////////////////////////////////////////////////////////////////////////////////////// 

// path - полный путь к картинке
// set_state(str) - картинка будет перегружена на новую с окончанием равным str.
// 		пример: path /img/btn.png set_state("down"), бедет загружена картинка /img/btn_down.png
ui.image=function(path)
{
	var img=document.createElement("span");
	img.className="image";
	
	img.image_path=splite_file_path(path);
	img.set_state=function(type)
	{
		var path=img.image_path;
		var name=path.name;
		if(type!="" && type!=ui.btn_types.up){
			name+="_"+type;
		}
		img.style.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="' + path.path + name + "." + path.format + '", sizingMethod="scale")';
	}
	img.set_state("");
	
	return img;
}

// основа на ui.image
// иконка провайдера
// имя и папка берутся из хмл
ui.operator_ico=function(node)
{
	var img=ui.image("img/kazna_new/providers/" + node.getAttribute("folder") + "/" + node.getAttribute("image"));
	img.className="operator_logo";
	return img;
}

// основа на ui.image
// top logo - всегда одно
ui.logo=function(name){
	var logo=ui.image("img/kazna_new/logo_top/"+name+".png");
	logo.className='logo';
	return logo;
}

/////////////////////////////////////////////////////////////////////////////////////////////
//                                                                                         //
//                                         PANE                                            //
//                                                                                         //
///////////////////////////////////////////////////////////////////////////////////////////// 

// картинка состоящяя из трех частей (трех картинок ui.image) с тянущейся средней частью при смене ширины
// name - базовое имя файла. для name="bg" имена файлов будут bg_left.png bg_center.png bg_right.png
// w - ширина финального объекта
// scale - маштабирование 
// base_part_width - ширина файла картинки, левой и правой
// set_width(num) - изменение ширины
// set_state(str) - картинка будет перегружена на новую с окончанием равным str. 
// 		пример: name="bg" set_state("down"), 
// 		бедут загружены картини bg_left_down.png bg_center_down.png bg_right_down.png
ui.scale3_pane=function(name,w,scale,base_part_width)
{
	if(!scale)scale=1;
	if(!base_part_width)base_part_width=25;	
	
	var img=document.createElement("span");
	img.className="scale3_pane_"+name;
	
	base_part_width=base_part_width*scale;
	
	var path="img/gosoplata/ui/pane/";
	
	var parts=["left","center","right"];
	for (var i in parts){
		var part=ui.image(path+name+"_"+parts[i]+".png");
		part.style.width=base_part_width;
		img["part_"+parts[i]]=part;
		img.appendChild(part);
	}
	
	img.part_center.style.left=base_part_width;
		
	img.set_width=function(size)
	{
		img.style.width=size;
		img.part_center.style.width=size-base_part_width*2+1;
		img.part_right.style.left=size-base_part_width;
	}
	
	img.set_width(w);
	
	img.set_state=function(state){
		for (var i in parts){
			img["part_"+parts[i]].set_state(state);
		}
	}
	
	return img;
}

// картинка состоящяя из 9 частей (9 картинок ui.image) с тянущейся средней частью при смене размера
// type - базовое имя файла. для type="bg" имена файлов будут bg_left.png bg_center.png bg_right.png
// _w - ширина финального объекта
// _h - высота финального объекта
// scale - маштабирование 
// base_part_width - ширина файла картинки, левой и правой
// set_size($w,$h)) - изменение размеров
ui.scale9_pane=function(type,_w,_h,scale)
{
	if(!scale)scale=1;
	var img=document.createElement("span");
	img.className="scale9_pane_"+type;
	
	var base_part_width=115*scale;
	var base_part_height=2;
	
	var path="img/gosoplata/ui/pane/";
	
	var parts_h=["left","center","right"];
	var parts_v=["top","center","bottom"];
	
	for (var i in parts_h){
		for (var j in parts_v){
			var name=parts_h[i]+"_"+parts_v[j];
			var part=ui.image(path+type+"_"+name+".png");
			
			var w=base_part_width;
			if(i==1)w=base_part_height;
			var h=base_part_width;
			if(j==1)w=base_part_height;
			
			part.style.width=w;
			part.style.height=h;
			img["part_"+name]=part;
			img.appendChild(part);
		}
	}
		
	img.set_size=function($w,$h)
	{
		img.style.width=$w;
		img.style.height=$h;
		
		var ww=Number($w)-Number(base_part_width)*2;
		var hh=Number($h)-Number(base_part_width)*2;
		var s1=[1,base_part_width,(Number($w)-Number(base_part_width))];
		var s2=[1,base_part_width,(Number($h)-Number(base_part_width))];
		
		for (var i in parts_h){
			for (var j in parts_v){
				var name="part_"+parts_h[i]+"_"+parts_v[j];
				var part=img[name];
				
				part.style.left=s1[i];
				part.style.width=(i==1)?ww:base_part_width;
				part.style.height=(j==1)?hh:base_part_width;
				part.style.top=s2[j];
			}
		}
	}
	
	img.set_size(_w,_h);
	
	return img;
}

/////////////////////////////////////////////////////////////////////////////////////////////
//                                                                                         //
//                                         BUTTONS                                         //
//                                                                                         //
///////////////////////////////////////////////////////////////////////////////////////////// 

ui.btn_types={up:"up",down:"down",disable:"disable"};
//var poz_horizont={left:"left",right:"right"};
//var poz_vertical={top:"top",bottom:"bottom"};

ui.button_base=function(target, bg_img_path, ico_img_path, onClick)
{
	target.style.position="relative";
	
	target.set_state=function(state_name)
	{
		target.state=state_name;
		for(var i in target.images)
		{
			var img=target.images[i];
			img.set_state(state_name);
		}
	};
	
	target.enabled=function(bulean)
	{
		if(bulean){
			target.set_state(ui.btn_types.up);
			target.onclick=function()
			{
				target.set_state(ui.btn_types.down);
				setTimeout(function(){
										target.set_state(ui.btn_types.up); 
										if(typeof target.on_click == "string"){
											eval(target.on_click);
										}else if(typeof target.on_click == "function"){
											target.on_click();
										}
									} , 100);
			}
		}else{
			target.onclick=null;
			target.set_state(ui.btn_types.disable);
		}
	};
	
	target.add_image=function(img)
	{
		target.appendChild(img);
		target.images.push(img);
		return img;
	}
	
	target.remove_image=function($img)
	{
		for(var i in target.images)
		{
			var img=target.images[i];
			if($img==img){
				target.images.splice(i,1);
				target.removeChild(img);
				return;
			}
		}
	}
	
	target.set_ico=function(ico){
		if(target.ico){
			target.remove_image(target.ico);	
		}
		target.ico=target.add_image(ico);
	}
	
	target.on_click=onClick;
	target.images=[];
	
	if(bg_img_path && bg_img_path.length)target.add_image(ui.image(bg_img_path));
	if(ico_img_path && ico_img_path.length)target.set_ico(ui.image(ico_img_path));	
	
	target.enabled(true);
	return target;
}

// центральные кнопки на индексной странице
// type - число от 1 до 4. 1 соответсвует left_top
ui.big_button=function(type, ico, page)
{
	var path = "img/gosoplata/ui/buttons/big/";
	var types={"1":"but_left_top","2":"but_right_top","3":"but_left_bottom","4":"but_right_bottom"};
	
	var target=document.createElement("span");
	target.className="big_button";
	
	ui.button_base(target,path+types[type]+".png",ico, page);
	
	return target;
}

ui.medium_button=function(type, ico)
{
	var path = "img/gosoplata/ui/buttons/medium/";
		
	var target=document.createElement("span");
	target.className="medium_button";
	
	ui.button_base(target,path+type+".png",path+"ico/"+ico+".png", function(){set_folder(ico);});
	
	return target;
}

ui.operator_button=function(node)
{	
	var btn=document.createElement("span");
	btn.className="operator_button";
	
	btn.provider_node=node;
	
	var bg = "img/gosoplata/ui/buttons/operator/but_operator.png";
	ui.button_base(btn,bg,"",function(){next_prv(node.getAttribute("id"));});
	
	btn.set_ico(ui.operator_ico(node));
	
	return btn;
}

ui.menu_button=function(type)
{
	var btn=document.createElement("span");
	var path = "img/gosoplata/ui/buttons/menu/";
		
	btn.className="menu_button";
	
	ui.button_base(btn,path+"but_"+type+".png","");
	
	return btn;
}

ui.page_button=function($id)
{
	var btn=document.createElement("span");
	btn.id=$id;
	var path = "img/gosoplata/ui/buttons/page_indicator/but.png";
		
	btn.className="page_button";
	
	ui.button_base(btn,"img/gosoplata/ui/buttons/page_indicator/but.png","",function(){next_page(btn.id);});
	
	return btn;
}

ui.key_button=function(type,vals,$w,$h)
{
	var btn=document.createElement("span");
	btn.className="key_button";
	btn.style.margin=2;
	btn.style.width=$w;
	btn.style.height=$h;
	var font_size=60;
	if($h<90)font_size=38;
	
	btn.ubdate_val=function(id){
		if(btn.type=="char"){
			btn.val=btn.vals.substr(id, 1);
			btn.ico.innerHTML=btn.val;
		}else{
			btn.val=btn.vals;
		}
	}
	
	btn.type=type;
	btn.vals=vals;
	
	var bg;
	var ico;
	if(type!="char"){
		ico=ui.image("img/gosoplata/ui/buttons/keypad/"+vals+".png");
		bg="but_red_numkey";
	}else{
		ico=ui.key_text_ico(font_size);
		bg="but_blue_numkey";
	}
	
	ui.button_base(btn,"","",function(){btn.parentNode.key_press(btn.type,btn.val);});
	
	var bg_plane=ui.scale3_pane(bg,$w,$h/92,45);
	bg_plane.style.height=$h;
	btn.add_image(bg_plane);
	
	if(type!="char"){
		btn.appendChild(ico);
	}else{
		btn.set_ico(ico);
	}
		
	btn.ubdate_val(0);
		
	return btn;
}

/////////////////////////////////////////////////////////////////////////////////////////////
//                                                                                         //
//                                         FILDS                                           //
//                                                                                         //
///////////////////////////////////////////////////////////////////////////////////////////// 

ui.fild_base=function(bg_type,w)
{
	var fild =document.createElement("span");
	fild.style.position="relative";
	fild.style.marginTop=10;
	fild.style.marginRight=10;
	fild.style.marginBottom=10;
	
	fild.update_height=function()
	{
		fild.style.height=fild.bg.offsetHeight;
	}
	
	fild.set_width=function(size)
	{
		fild.style.width=size;
		fild.bg.set_width(size);
	}
	
	fild.set_selected=function(selected){
		var state="";
		if(selected)state="chek";
		
		fild.bg.set_state(state);
		
		return state;
	}
	
	fild.bg=ui.scale3_pane(bg_type,w);
	fild.appendChild(fild.bg);
	setTimeout( fild.update_height, 10 );
	
	return fild;
}

ui.static_fild=function(w,val)
{
	var fild =ui.fild_base("input_bg",w);
	
	var $title = document.createElement("p");
	$title.className='static_fild';
	$title.innerHTML=val;
	fild.appendChild($title);
	
	return fild;
}

ui.input_fild=function(w)
{
	var fild =ui.fild_base("input",w);
	
	fild.input =document.createElement("input");
	fild.input.className="fild";
	fild.input.setAttribute("readOnly",true) ;
	fild.input.value="";
	fild.input.type="text";
	fild.input.unselectable="on";
	
	fild.appendChild(fild.input);
	
	var prew_set_width=fild.set_width;
	fild.set_width=function(size)
	{
		prew_set_width(size);
		fild.input.style.width=size-20;
	}
	
	fild.set_value=function(val){
		if(val.length<=fild.max_length)fild.input.value=val;
	}
	
	fild.get_value=function(){
		return fild.input.value;
	}
	
	fild.get_dispay_value=function()
	{
		return fild.input.value;
	}
	/*
	var prew_set_selected=fild.set_selected;
	fild.set_selected=function(selected)
	{
		var state=prew_set_selected(selected);
	}
	*/
	fild.max_length=1000;
	fild.set_width(w);
	
	return fild;
}

ui.prefix_input_fild=function( prefix, title_text,w)
{
	var fild =ui.fild_base("input_bg",w);
	//fild.style.background="#ff00ff";
	
	fild.update_height=function()
	{
		var step=0;
		if(fild.$title.innerHTML)step+=fild.$title.offsetHeight;
		fild.bg.style.top=step;
		fild.input.style.top=step;
		if(fild.prefix)
		{
			fild.prefix.style.top=step;
		}
		
		fild.style.height=step+fild.bg.offsetHeight;
	}
	
	fild.set_value=function(val)
	{
		fild.input.max_length=fild.max_length;
		fild.input.set_value(val);
	}
	
	fild.get_dispay_value=function()
	{
		var val=fild.input.get_dispay_value();
		if(fild.prefix)val=fild.prefix.innerHTML+' '+val;
		return val;
	}
	
	var prew_set_width=fild.set_width;
	fild.set_width=function(size)
	{
		prew_set_width(size);
		
		var step=5;
		if(fild.prefix)
		{
			if(fild.prefix.offsetWidth==0){
				setTimeout( function() { fild.set_width(size) }, 10 );
				return;
			}
			step+=fild.prefix.offsetWidth+10;
		}
		fild.input.style.left=step;
		fild.input.set_width(size-step-5);
	}
	
	var prew_set_selected=fild.set_selected;
	fild.set_selected=function(selected)
	{
		var state=prew_set_selected(selected);
		fild.input.set_selected(selected);
	}
	
	fild.input =ui.input_fild(90);
	fild.input.style.margin=0;
	fild.appendChild(fild.input);
	
	fild.get_value=fild.input.get_value;
	
	if(prefix && prefix.length)
	{
		fild.prefix = document.createElement("p");
		fild.prefix.className='prefix';
		fild.prefix.innerHTML=prefix;
		
		fild.appendChild(fild.prefix);
	}
	
	fild.$title = document.createElement("p");
	fild.$title.className='input_title';
	fild.$title.innerHTML=title_text;
	fild.appendChild(fild.$title);
	
	fild.set_width(w);
	setTimeout( fild.update_height, 10 );
	
	return fild;
}

ui.key_text_ico=function(size)
{
	var ico = document.createElement("p");
	ico.unselectable="on";
	ico.$size=size;
	
	ico.set_state=function(state){
		ico.className="key_ico_"+state;
		ico.style.fontSize=ico.$size;
	}
	ico.set_state(ui.btn_types.up);
	return ico;
}

ui.keypad=function(type)
{
	var contayner=document.createElement("span");
	contayner.style.position="relative";
	//contayner.style.background="#ffffff";
	
	contayner.elements=new Array();
	
	contayner.$capslock=false;
	contayner.$shift=false;
	contayner.lang=0;
	
	//var scale=1;
	
	contayner.add_btn=function(type,vals,$w){
		if(!$w)$w=size;
		var btn=ui.key_button(type,vals,$w,size);
		contayner.elements.push(btn);
		contayner.appendChild(btn);
	}
	
	contayner.ubdate=function(){
		var shift=contayner.$capslock || contayner.$shift;
		var id=Number(contayner.lang)+Number(shift);
		//alert(id)
		for(var i=0;i<contayner.elements.length;i++){
			var btn=contayner.elements[i];
			btn.ubdate_val(id);
		}
	}
	
	contayner.set_shift=function(){
		contayner.$shift=!contayner.$shift;
		contayner.ubdate();
	}
	
	contayner.set_capslock=function(){
		contayner.$capslock=!contayner.$capslock;
		contayner.$shift=false;
		contayner.ubdate();
	}
	
	contayner.set_lang=function(){
		if(contayner.lang==0)contayner.lang=2;
		else contayner.lang=0;
		contayner.ubdate();
	}
	
	var size;
	if(type=="num"){
		size=92;//92
		contayner.style.width=(size+4)*3;
		
		for (var i=1;i<10;i++){
			contayner.add_btn("char",i+''+i+''+i+''+i);
		}
		contayner.add_btn("clear","clear_smol");
		contayner.add_btn("char","0000");
		contayner.add_btn("backspace","backspace_smol");
	}else{
		size=71;//75-4
		contayner.style.width=1140;
		//scale=1140/(size*15);
		
		contayner.add_btn("char","`~ёЁ");
		contayner.add_btn("char","1!1!");
		contayner.add_btn("char","2@2\"");
		contayner.add_btn("char","3#3№");
		contayner.add_btn("char","4$4;");
		contayner.add_btn("char", "5%5%");
		contayner.add_btn("char", "6^6:");
		contayner.add_btn("char", "7\&7?");
		contayner.add_btn("char", "8*8*");
		contayner.add_btn("char", "9(9(");
		contayner.add_btn("char", "0)0)");
		contayner.add_btn("char", "-_-_");
		contayner.add_btn("char", "=+=+");
											contayner.add_btn("backspace","backspace",153);	
		
											contayner.add_btn("tab", "tab",116);
		contayner.add_btn("char", "qQйЙ");
		contayner.add_btn("char", "wWцЦ");
		contayner.add_btn("char", "eEуУ");
		contayner.add_btn("char", "rRкК");
		contayner.add_btn("char", "tTеЕ");
		contayner.add_btn("char", "yYнН");
		contayner.add_btn("char", "uUгГ");
		contayner.add_btn("char", "iIшШ");
		contayner.add_btn("char", "oOщЩ");
		contayner.add_btn("char", "pPзЗ");
		contayner.add_btn("char", "[{хХ");
		contayner.add_btn("char", "]}ъЪ");
		contayner.add_btn("char", "||||",105);
		
											contayner.add_btn("capslock", "capslock",116);
		contayner.add_btn("char", "aAфФ");
		contayner.add_btn("char", "sSыЫ");
		contayner.add_btn("char", "dDвВ");
		contayner.add_btn("char", "fFаА");
		contayner.add_btn("char", "gGпП");
		contayner.add_btn("char", "hHрР");
		contayner.add_btn("char", "jJоО");
		contayner.add_btn("char", "kKлЛ");
		contayner.add_btn("char", "lLдД");
		contayner.add_btn("char", ";:жЖ");
		contayner.add_btn("char", ",\";эЭ");
											contayner.add_btn("enter", "enter",190);
		
											contayner.add_btn("shift", "shift",152);
		contayner.add_btn("char", "zZяЯ");
		contayner.add_btn("char", "xXчЧ");
		contayner.add_btn("char", "cCсС");
		contayner.add_btn("char", "vVмМ");
		contayner.add_btn("char", "bBиИ");
		contayner.add_btn("char", "nNтТ");
		contayner.add_btn("char", "mMьЬ");
		contayner.add_btn("char", ",<бБ");
		contayner.add_btn("char", ".>юЮ");
		contayner.add_btn("char", "/?.,");
		contayner.add_btn("char", "",230);
		
											contayner.add_btn("lang", "lang",310);
		contayner.add_btn("char", "    ",504);
											contayner.add_btn("clear", "clear",314);
	}
	
	contayner.set_lang();
	
	contayner.key_press=function(type,val)
	{
		press(type,val);
						
		if(type!='char'){
			switch(type){
				case "clear":
				break;	
				
				case "backspace":
				break;	
				
				case "tab":
				break;	
				
				case "capslock":
					contayner.set_capslock();
				break;	
				
				case "enter":
				break;	
				
				case "shift": 
					contayner.set_shift();
				break;	
				
				case "lang": 
					contayner.set_lang();
				break;	
			}
		}else{
			if(contayner.$shift)contayner.set_shift();
		}
	}
	
	return contayner;
}

ui.clock=function(){
	var clock=document.createElement("embed");
	clock.className='clock';
	clock.src="KaznaClock.swf";
	clock.bgcolor='#f0f0f0';
	return clock;
}

// path - путь к файлу
// возращает массив 
// path - путь до папка
// name - имя файла
// format - расширение файла (всегда заменяет на png. в конфиге прописаны пути к jpg а это неприемлемо в новом дизайне)
function splite_file_path(path)
{
    var name = "";
    var p_folder = "";
	var pos = path.lastIndexOf("/");
    if (pos != -1) {
        p_folder = path.substr(0, pos + 1);
        name = path.substr(pos + 1, path.length - pos - 1);
    } else {
        name = path;
    }
    
    var ar = name.split(".");
	
	return {path:p_folder,name:ar[0],format:'png'};//format:ar[1]};
}

ui.form=function()
{
	var form=document.createElement("form");
	form.style.position="relative";
	//form.style.background="#FFFFFF";
	form.style.display="inline";
	
	form.method="post";
	
	form.filds=new Array();
	
	form.validate=function() 
	{
		for (var i = 0; i < form.filds.length; i++) 
		{
			var fild=form.filds[i];
			var value=fild.get_value();
			if(value.length>=fild.min_length)
			{
				if (fild.regexp && fild.regexp.length != 0) 
				{
					if(!new RegExp(fild.regexp, "g").test(value)) return false;
				}
			}else{
				return false;	
			}
		}
		return true;	
	}
	
	form.add_fild=function(fild) 
	{
		fild.id=form.filds.length;
		fild.onclick=function(){
			form.select_field(fild.id);
		}
		
		form.filds.push(fild);
		form.appendChild(fild);
	}
	
	form.clear=function() 
	{
		for (var i = 0; i < form.elements.length; i++) {
			form.elements(i).value = "";
		}
		
		form.select_field(0);
	}
	
	form.select_field=function(id) 
	{
		form.selected_ID=id;
		for (var i = 0; i < form.filds.length; i++) 
		{
			form.filds[i].set_selected(i==id);
			//if(i==id){
				//form.selected=form.filds[i].input.input;
			//}
		}
	}
	
	form.on_key_down=function(type,val)
	{	
		var selected=form.filds[form.selected_ID];
		if (type == 'clear') {
			form.clear();
		} else if (type == 'backspace') {
			var value=selected.get_value();
			value=value.substring(0,value.length-1);
			selected.set_value(value);
		} else if(type=="char"){
			selected.set_value(selected.get_value()+val);
		}
	}
	
	return form;
}